<template>
	<navigatorComp title="注销账号" bgcColor="#121512" fontColor="#fff"></navigatorComp>

	<view v-if="isApply" class="closeAccount">
		<image src="http://112.124.50.179:8888/imgs/mine/closeAccount.png" mode=""></image>
		<view class="closeAccount_title">申请注销先贤祠墓纪念堂账号</view>
		<view class="closeAccount_tip">
			你提交的注销申请生效后，以下信息我们将进行验证以确保您的账号、财产安全
		</view>
		<view class="closeAccount_steps">
			<view class="closeAccount_step">
				<view class="closeAccount_step_top">
					<image src="http://112.124.50.179:8888/imgs/mine/close1.png" mode=""></image>
					账号处于安全状态
				</view>
				<view style="margin-left: 48rpx">
					您的账号当前为正常使用状态，没有被盗、被封风险
				</view>
			</view>
			<view class="closeAccount_step">
				<view class="closeAccount_step_top">
					<image src="http://112.124.50.179:8888/imgs/mine/close2.png" mode=""></image>
					账号财产已结清
				</view>
				<view style="margin-left: 48rpx">您的先贤祠墓纪念堂账号上没有资金及福币问题待结算</view>
			</view>
			<view class="closeAccount_step">
				<view class="closeAccount_step_top">
					<image src="http://112.124.50.179:8888/imgs/mine/close3.png" mode=""></image>
					云祭祀平台权限解除
				</view>
				<view style="margin-left: 48rpx">
					该账号注销后，纪念馆、祠堂等相关信息将会进行删除，其成员将会自动退出
				</view>
			</view>
			<view class="closeAccount_step">
				<view class="closeAccount_step_top">
					<image src="http://112.124.50.179:8888/imgs/mine/close4.png" mode=""></image>
					账号注销后、30天内将无法再次进行注册
				</view>
			</view>
		</view>
	</view>

	<!-- 注销后状态 -->
	<view v-else class="logoff_status">
		<image v-if="isLogoff" src="http://112.124.50.179:8888/imgs/mine/close_suc.png" mode=""></image>
		<image v-else src="http://112.124.50.179:8888/imgs/mine/close_fail.png" mode=""></image>

		<view class="logoff_title">
			{{ isLogoff ? '已完成注销申请' : '注销失败' }}
		</view>

		<view v-if="!isLogoff" class="logoff_tip">由于以下原因，暂时无法注销账号</view>

		<view v-if="isLogoff" class="logoff_success">
			请您注意，先贤祠墓纪念堂团队已接收到您的注销申请，并将在接下来的30天内进行处理。为了确保您的账户能够顺利注销，并彻底删除您的所有数据，我们恳请您在此期间内不要登录先贤祠墓纪念堂平台。一旦注销流程完成，您的所有信息将被永久删除。感谢您的理解与配合。
		</view>
		<view v-else class="logoff_fail">
			<view class="logoff_fail_title">先贤祠墓纪念堂财产尚未结清</view>
			<view class="logoff_fail_tip">请先把财产清空，再申请注销账号</view>
		</view>
	</view>

	<view class="closeAccount_footerBtn">
		<view class="footerBox"></view>
		<view class="footerFixed">
			<view class="footer_btn" v-if="isApply" @click="showConfirmClose = true">申请注销</view>
			<view class="footer_btn" v-else @click="confirmLogoff">确定</view>
			<view class="closeAccount_tip" v-if="isApply">
				<u-icon
					name="checkmark-circle-fill"
					size="18"
					color="rgb(91,202,101)"
					style="margin-right: 8rpx"
				></u-icon>
				我已阅读并同意
				<text style="color: #4489fd">《注销须知》</text>
			</view>
		</view>
	</view>

	<!-- 注销确认框 -->
	<myModel
		v-model:show="showConfirmClose"
		title="注销账号"
		content="注销账号将清除所有关联数据，您是否确认要注销？"
		confirmText="我再想想"
		cancelText="确认注销"
		@cancel="cancelModel"
		@confirm="showConfirmClose = false"
	></myModel>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import navigatorComp from '/components/navigator/index.vue';
import myModel from '/components/model/index.vue';

onLoad(() => {});
const showConfirmClose = ref(false);
const isApply = ref(false); //是否是申请注销
const isLogoff = ref(true); //注销是否成功

/**
 * 确认注销
 */
const cancelModel = () => {
	showConfirmClose.value = false;
	uni.showToast({
		title: '注销成功'
	});
};

/**
 * 注销完成后，点击确定
 */
const confirmLogoff = () => {
	if (isLogoff.value) {
		uni.clearStorage();
		uni.reLaunch({
			url: '/pages/login/login'
		});
	} else {
		uni.navigateBack();
	}
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
}

.closeAccount {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-top: 72rpx;

	image {
		width: 104rpx;
		height: 104rpx;
		margin-bottom: 32rpx;
	}

	.closeAccount_title {
		font-weight: 400;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 38rpx;
		margin-bottom: 16rpx;
	}

	.closeAccount_tip {
		margin: 0 64rpx 68rpx;
		text-align: justify;
		font-weight: 400;
		font-size: 24rpx;
		color: #969da3;
		line-height: 28rpx;
	}

	.closeAccount_steps {
		margin: 0 64rpx;

		.closeAccount_step {
			margin-bottom: 34rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #969da3;
			line-height: 28rpx;

			.closeAccount_step_top {
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 33rpx;
				margin-bottom: 12rpx;
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
					margin-bottom: 0;
				}
			}
		}
	}
}

.closeAccount_footerBtn {
	width: 100%;
	z-index: 101 !important;

	.footerBox {
		width: 100%;
		height: calc(env(safe-area-inset-bottom) + 120rpx);
	}

	.footerFixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		/* #ifdef H5 */
		height: 182rpx;
		/* #endif */
		/* #ifndef H5 */
		height: calc(env(safe-area-inset-bottom) + 176rpx);
		/* #endif */
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 16rpx 0 32rpx 0;
		box-sizing: border-box;
	}

	.footer_btn {
		width: 400rpx;
		height: 88rpx;
		box-sizing: border-box;
		background: #f3e0bb;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		font-size: 32rpx;
		color: #524630;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.footer_btn_inActive {
		opacity: 0.5;
	}

	.closeAccount_tip {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 28rpx;
		margin-top: 16rpx;
		display: flex;
		align-items: center;
	}
}

.logoff_status {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-top: 64rpx;

	image {
		width: 120rpx;
		height: 120rpx;
	}

	.logoff_title {
		font-weight: 400;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 38rpx;
		margin-top: 24rpx;
	}

	.logoff_tip {
		font-weight: 400;
		font-size: 24rpx;
		color: #969da3;
		line-height: 28rpx;
		margin-top: 16rpx;
	}

	.logoff_success {
		margin: 24rpx 64rpx 0 64rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #c5c5c5;
		line-height: 42rpx;
	}

	.logoff_fail {
		width: 686rpx;
		margin-top: 40rpx;
		background: #292b2a;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 32rpx;
		box-sizing: border-box;

		.logoff_fail_title {
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 33rpx;
			margin-bottom: 12rpx;
		}

		.logoff_fail_tip {
			font-weight: 400;
			font-size: 24rpx;
			color: #969da3;
			line-height: 28rpx;
		}
	}
}
</style>
